<template>
	<div class="pay-method-con">
		<el-form labelPosition="right" label-width="180px" :model="form" class="quane-pay" :rules="rules" ref="form">
			<el-form-item label="支付方式：">
				<el-radio-group v-model="form.paymentMethod" :disabled="isDone">
					<el-radio label="3">现金</el-radio>
					<el-radio label="4">刷卡</el-radio>
					<el-radio label="1">支付宝</el-radio>
					<el-radio label="2">微信</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="总金额：" prop="totalAmount">
				<el-input class="pay-method-ipt total padding-right" v-model="form.totalAmount" :maxlength="5" :readonly="!canSubmit"></el-input>
				<span class="detail-btn" @click="detail" v-if="!canSubmit">详   细</span>
			</el-form-item>
			<el-form-item label="分期数目：" prop="instalment">
				<el-select class="pay-method-ipt" v-model="form.instalment" placeholder="请选择分期数目..." :disabled="!canSubmit">
					<el-option label="2期" :value="2"></el-option>
					<el-option label="3期" :value="3"></el-option>
					<el-option label="4期" :value="4"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="本期金额：" prop="amount" v-if="!isDone">
				<el-input class="pay-method-ipt total" v-model="form.amount" :maxlength="5"></el-input>
			</el-form-item>
			<el-form-item label="可学科目：" prop="subject">
				<el-checkbox-group v-model="form.subject">
					<el-checkbox label="1" :disabled="isCheckedOne">科目一</el-checkbox>
					<el-checkbox label="2" :disabled="isCheckedTwo">科目二</el-checkbox>
					<el-checkbox label="3" :disabled="isCheckedThree">科目三</el-checkbox>
					<el-checkbox label="4" :disabled="isCheckedFour">科目四</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="招生业务员：">
				<el-select class="pay-method-ipt" v-model="form.clerkBh" placeholder="请选择招生业务员..." :disabled="!canSubmit">
					<el-option v-for="item in employees" :key="item.ebh" :label="item.ename+'['+item.idCard+']'" :value="item.ebh">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="备注：" prop="remark">
				<el-input type="textarea" class="pay-method-ipt" v-model="form.remark" :readonly="isDone"></el-input>
			</el-form-item>
			<input type="button" class="submit-btn" @click="submit" value="提   交" v-if="!isDone">
		</el-form>
		<!-- 分期详细-->
		<fenqiDetail v-model="detailShow" :detailData="detailData"></fenqiDetail>
	</div>
</template>

<script>
	import fenqiDetail from "@/components/stupayment/fenqi-detail";

	export default {
		name: "tab-two",
		components: {
			fenqiDetail
		},
		props: ['employees', 'stuData'],
		data() {
			return {
				canSubmit: true,
				isDone: false,
				form: {
					paymentMethod: '3',
					totalAmount: '',
					instalment: '',
					amount: '',
					subject: [],
					clerkBh: '',
					clerkName: '',
					remark: '',
					instalmentNo: 1
				},
				subtmp: [],
				detailShow: false,
				detailData: null,
				rules: {
					totalAmount: [{
							required: true,
							message: "请输入总金额！",
							trigger: "blur"
						},
						{
							max: 5,
							message: "最大长度 5 个字符",
							trigger: "blur"
						}
					],
					instalment: [{
						required: true,
						message: "请选择分期数目！",
						trigger: "blur"
					}],
					amount: [{
							required: true,
							message: "请输入总金额！",
							trigger: "blur"
						},
						{
							max: 5,
							message: "最大长度 5 个字符",
							trigger: "blur"
						}
					],
					remark: [{
						max: 200,
						message: "最大长度 200 个字符",
						trigger: "blur"
					}]
				}
			}
		},
		computed: {
			isCheckedOne() {
				return !this.canSubmit && this.subtmp.indexOf("1") != -1;
			},
			isCheckedTwo() {
				return !this.canSubmit && this.subtmp.indexOf("2") != -1;
			},
			isCheckedThree() {
				return !this.canSubmit && this.subtmp.indexOf("3") != -1;
			},
			isCheckedFour() {
				return !this.canSubmit && this.subtmp.indexOf("4") != -1;
			}
		},
		watch: {
			'form.clerkBh': function(val, old) {
				let _emp = this.employees.filter((e) => {
					return e.ebh == val;
				});

				if(_emp.length > 0) {
					this.form.clerkName = _emp[0].ename + '[' + _emp[0].idCard + ']';
				} else {
					this.form.clerkName = '';
				}
			},
			stuData: function(stu) {
				if(stu.pbh) {
					this.canSubmit = false;
					this.form.totalAmount = stu.totalAmount;
					this.rules.totalAmount = [];
					this.form.instalment = stu.instalment;
					this.form.amount = stu.amount?stu.amount+'':'';
					this.form.subject = stu.subject;
					this.subtmp = stu.subject;
					this.form.clerkBh = stu.clerkBh;
					if (stu.instalmentList.length > 0) {
						this.form.instalmentNo = stu.instalmentList.length + 1;
					}
					
					if (this.form.instalmentNo > stu.instalment) {
						this.isDone = true;
					}
				} else {
					Object.assign(this.$data, this.$options.data());
					this.$nextTick(() => {
						this.$refs.form.clearValidate();
					});
				}
			}
		},
		methods: {
			detail() {
				this.detailShow = true;
				this.detailData = this.stuData.instalmentList;
			},
			submit() {
				this.$refs.form.validate(valid => {
					if(!valid) {
						return false;
					}
					this.$emit('confirm', this.form);
				});
			}
		}
	}
</script>

<style>

</style>